<template>
  <div>
    <!-- 活动时间选择 -->
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动时间">
        <el-date-picker
            v-model="form.performanceTime"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="handleDateChange"
        ></el-date-picker>
      </el-form-item>
    </el-form>

    <!-- 日期快捷选择 -->
    <div class="block" style="margin-bottom: 20px;">
      <span class="demonstration" style="margin-right: 20px;">选择日期</span>
      <el-button plain @click="queryToday">今日</el-button>
      <el-button plain @click="queryLast7Days">近7日</el-button>
      <el-button plain @click="queryLast30Days">近30日</el-button>
    </div>

    <!-- 表格展示 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="driverId" label="司机ID"></el-table-column>
      <el-table-column prop="driverName" label="司机姓名"></el-table-column>
      <el-table-column prop="phoneNumber" label="手机号码"></el-table-column>
      <el-table-column prop="completedOrders" label="运单完成数量"></el-table-column>
      <el-table-column prop="onTimeOrders" label="按时完成数量"></el-table-column>
      <el-table-column prop="abnormalOrders" label="异常运单数"></el-table-column>
      <el-table-column prop="abnormalRate" label="异常率"></el-table-column>
      <el-table-column prop="totalMileage" label="里程合计"></el-table-column>
    </el-table>


    <!-- 分页组件 -->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 3, 5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          { text: "最近一周", onClick(picker) { this.setDateRange(-7); } },
          { text: "最近一个月", onClick(picker) { this.setDateRange(-30); } },
          { text: "最近三个月", onClick(picker) { this.setDateRange(-90); } },
        ],
      },
      form: {
        performanceTime: [], // 使用一个数组来存储日期范围
      },
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
    };
  },
  methods: {
    // 处理分页和每页大小变化
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.fetchData();
    },
    // 处理日期范围变化
    handleDateChange(value) {
      if (value && value.length === 2) {
        this.form.performanceTime = value;
        this.fetchData();
      }
    },
    // 设置日期范围
    setDateRange(days) {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() + days * 24 * 60 * 60 * 1000);
      this.form.performanceTime = [this.formatDate(start), this.formatDate(end)];
      this.fetchData();
    },
    // 格式化日期为 YYYY-MM-DD
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    // 获取数据
    fetchData() {
      axios
          .post(
              `http://localhost:10086/statistical/performance/findPerformanceAll/${this.pageNum}/${this.pageSize}`,
              { performanceTime: this.form.performanceTime }
          )
          .then((response) => {
            if (response.data.code === 200) {

              this.tableData = response.data.data.list;
              this.total = response.data.data.total;
            } else {
              this.$message.error(`获取绩效数据失败: ${response.data.message}`);
            }
          })
          .catch((error) => {
            console.error("请求失败:", error);
            this.$message.error("网络错误，请稍后再试！");
          });
    },
    // 快捷查询函数
    queryToday() {
      this.setDateRange(0);
    },
    queryLast7Days() {
      this.setDateRange(-7);
    },
    queryLast30Days() {
      this.setDateRange(-30);
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

<style scoped>
.block {
  margin-bottom: 20px;
}
.demonstration {
  margin-right: 20px;
}
</style>